@charset"UTF-8";
$fontSize:40;   
@function r($p) {
    @return $p/$fontSize*1rem;
}
*{
    font-size: 0;
}
html,body{
    height: 100%;
    width: 100%;
}
html{
    font-size: 40px;
}
.web{
    width: 100%;
    height: 100%;
    position: relative;
    >.top{
        position: absolute;
        top:0;
        width: 100%;
        height: r(75);
        border-bottom: 1px solid #a7a7a7;
        >ul{
            display: flex;
            justify-content: space-between;
            line-height: r(75);
            padding-left: r(28);
            padding-right: r(28);
            >li:nth-of-type(1){
                display: flex;
                align-items: center;
                >a{
                    height: r(38);
                    width: r(22);
                    >img{
                        height: r(38);
                        width: r(22);
                    }
                }
            }
            >li:nth-of-type(2){
                font-size: r(30);
                color: rgba(0,0,0,9);
            }
            >li:nth-of-type(3){
                display: flex;
                align-items: center;
                >img{
                    height: r(27);
                    width: r(30);
                    margin-left: r(18);
                }
                >img:first-of-type{
                    margin-left: 0;
                }
            }
        }
    }
    >.content{
        width: 100%;
        height: calc(100% - 1.875rem);
        overflow: auto;
        position: absolute;
        top: r(75);
        padding-bottom: r(81);
        >.first{
            width: 100%;
            height: r(424);
            >.bg{
                width: 100%;
                height: r(424);
                background: url(../img/wodekongjian2.jpg) top 0px left r(-110);
                background-size: contain;
                z-index:1;
                position:relative;
                >ul{
                    position: absolute;
                    z-index: 11;
                    top:r(44);
                    width: 100%;
                    text-align: center;
                    >li:first-of-type{
                        width: r(180);
                        height: r(180);
                        margin: 0 auto;
                        position: relative;
                        margin-bottom: r(10);
                        >div{
                            width: r(180);
                            height: r(180);
                            border-radius: r(90);
                            overflow: hidden;
                            position: relative;
                            >img{
                                height: 100%;
                                position: absolute;
                                left: -23%;
                                top:20%;
                                transform: scale(1.5);
                            }
                        }
                        >img{
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: r(21);
                            height: r(21);
                        }
                    }
                    >li:nth-of-type(2){
                        font-size: r(20);
                        color: white;
                        text-align: center;
                        margin-bottom: r(10);
                        >span{
                            font-size: r(20);
                            color: red;
                        }
                    }
                    >li:nth-of-type(3){
                        font-size: r(20);
                        color: white;
                        margin-bottom: r(10);
                    }
                    >li:nth-of-type(4){
                        font-size: r(20);
                        margin-bottom: r(10);
                        >ul{
                            display: flex;
                            width: r(170);
                            margin: 0 auto;
                            justify-content: space-between;
                            >li{
                                text-align: center;
                                border: 1px solid white;
                                font-size: r(20);
                                color: white;
                                padding: r(3);
                            }
                        }
                    }
                    >li:nth-of-type(5){
                        font-size: r(20);
                        color: white;
                    }
                }
                &::after{
                content: "";
                width:100%;
                height:100%;
                position: absolute;
                left:0;
                top:0;
                background: inherit;
                filter: blur(6px);
                z-index: 2;
                }
            }
        }
        >.second{
            >ul{
                width: 100%;
                >li:first-of-type{
                    width: 100%;
                    height:r(82);
                    border-bottom: 1px solid #e5e5e5;
                    padding-left: r(30);
                    padding-right: r(16);
                    display: flex;
                    justify-content: space-between;
                    >ul:first-of-type{
                        width: 40%;
                        display: flex;
                        height: 100%;
                        align-items: center;
                        justify-content: space-between;
                        >li{
                            >span{
                                font-size: r(18);
                                color: black;
                                display:  inline-block;
                                vertical-align: middle;
                            }
                        }
                        >li:first-of-type{
                            >img{
                                height:r(19) ;
                                width: r(28);
                                margin-right: r(10);
                                display: inline-block;
                                vertical-align: middle;
                            }
                        }
                        >li:nth-of-type(2){
                            >img{
                                height:r(24) ;
                                width: r(22);
                                margin-right: r(10);
                                display: inline-block;
                                vertical-align: middle;
                            }
                        }
                        >li:nth-of-type(3){
                            >img{
                                height:r(22) ;
                                width: r(34);
                                margin-right: r(10);
                                display:  inline-block;
                                vertical-align: middle;
                            }
                        }
                    }
                    >ul:last-of-type{
                        display: flex;
                        height: 100%;
                        width: 40%;
                        align-items: center;
                        justify-content: space-between;
                        >li{
                            position: relative;
                            >p:first-of-type{
                                font-size: r(22);
                                color: black;
                                text-align: center;
                            }
                            >p:last-of-type{
                                font-size: r(18);
                                color: #d4d4d4;
                                text-align: center;
                            }
                        }
                        >li:first-of-type{
                            &::before{
                                position: absolute;
                                right: r(-29);
                                bottom: r(6);
                                content:"";
                                height:r(32);
                                width: r(3);
                                background: #cccccc;
                            }
                        }
                        >li:nth-of-type(2){
                            &::before{
                                position: absolute;
                                right: r(-29);
                                bottom: r(6);
                                content:"";
                                height:r(32);
                                width: r(3);
                                background: #cccccc;
                            }
                        }
                    }
                }
                >li:nth-of-type(2){
                    width: 100%;
                    height:r(78);
                    border-bottom: 1px solid #e5e5e5;
                    padding-left: r(30);
                    padding-right: r(30);
                    >ul{
                        display: flex;
                        align-items: center;
                        height: 100%;
                        justify-content: space-between;
                        >li{
                            border: 1px solid #bbbbbb;
                            border-radius: 6px;
                            padding: r(7);
                            color: #585858;
                            font-size: r(20);
                        }
                        >li:first-of-type{
                            border: none;
                            >img{
                                width: r(27);
                                height: r(27);
                            }
                        }
                        >li:nth-of-type(7){
                            border: none;
                        }
                        >li:last-of-type{
                            border: none;
                            >img{
                                width: r(15);
                                height: r(25);
                            }
                            
                        }
                    }
                }
                >li:last-of-type{
                    height: r(98);
                    width: 100%;
                    padding-left: r(58);
                    padding-right: r(43);
                    border-bottom: 1px solid #7f7f7f;
                    >ul{
                        display: flex;
                        height: 100%;
                        justify-content: space-between;
                        align-items: center;
                        >li:first-of-type{
                            text-align: center;
                            >img{
                                height:r(30) ;
                                width: r(40);
                                margin-bottom: r(6);
                            }
                            >p{
                                font-size: r(17);
                                color: #5d5d5d;
                            }
                        }
                        >li:nth-of-type(2){
                            text-align: center;
                            >img{
                                height:r(30) ;
                                width: r(34);
                                margin-bottom: r(6);
                            }
                            >p{
                                font-size: r(17);
                                color: #d3d3d3;
                            }
                        }
                        >li:nth-of-type(3){
                            text-align: center;
                            >img{
                                height:r(31) ;
                                width: r(31 );
                                margin-bottom: r(6);
                            }
                            >p{
                                font-size: r(17);
                                color: #d3d3d3;
                            }
                        }
                        >li:nth-of-type(4){
                            text-align: center;
                            >img{
                                height:r(32) ;
                                width: r(28);
                                margin-bottom: r(6);
                            }
                            >p{
                                font-size: r(17);
                                color: #d3d3d3;
                            }
                        }
                    }
                }
            }
            
            
        }
        >.third{
            width: 100%;
            >.titleOne{
                height: r(41);
                background: #f2f2f2;
                display: flex;
                padding-left: r(28);
                padding-right: r(28);
                align-items: center;
                justify-content: space-between;
                >span{
                    font-size: r(26);
                    color: #5e5e5e;
                }
                >img{
                    height: r(26);
                    width:r(26) ;
                }
            }
            >ul{
                padding-top: r(30);
                padding-bottom: r(30);
                padding-left: r(28);
                width: 100%;
                height: 100%;
                >li{
                    font-size: r(20);
                    color: #343434;
                    margin-bottom: r(30);
                }
                >li:last-of-type{
                    margin: 0;
                }
            }
            >.titleTwo{
                height: r(41);
                background: #f2f2f2;
                display: flex;
                padding-left: r(28);
                padding-right: r(28);
                align-items: center;
                justify-content: space-between;
                >span{
                    font-size: r(26);
                    color: #5e5e5e;
                }
                >img{
                    height: r(26);
                    width:r(26) ;
                }
            }
            >.jiahao{
                width: 100%;
                padding-top: r(22);
                padding-left: r(26);
                padding-bottom: r(41);
                >div{
                    position: relative;
                    width:r(97) ;
                    height: r(97);
                    border-radius: r(6);
                    background: #e5e5e5;
                    >img{
                        width:r(56) ;
                        height: r(56);
                        position: absolute;
                        top:50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                    }
                }
            }
        }
    }
    >.foot{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: r(81);
        >ul{
            width:14.6rem;
            margin: 0 auto ;
            display: flex;
            -webkit-diaplay:flex;
            justify-content: space-between;
            >li{
                display: flex;
                -webkit-diaplay:flex;
                align-items: flex-end;
                img{
                    width: 1.5rem;
                    height: 1.5rem;
                    opacity: 1.0;
                }
            }
            >li:nth-of-type(3){
                >img{
                    width: 2.525rem;
                    height: 2.025rem;
                }
            }
            
        }
    }
}



